<template>
    <el-dialog
      title="添加用户"
      :close-on-click-modal ="false"
      @close="addDialogClosed"
      :visible.sync="addDialogVisible"
      width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addFrom.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="addFrom.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addFrom.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addFrom.mobile" placeholder="手机"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
</template>
<script>
export default{
  name:"MyAdd",
  data() {
     // 验证邮箱的规则
     var checkEmail = (_,value,cb) => {
        const regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if(regEmail.test(value)){
          return cb();
        }else{
          cb(new Error('请输入合法邮箱'));
        }
      }
      // 验证手机号
      var checkPhone = (_,value,cb) =>{
        const regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (regPhone.test(value)) {
          return cb();
        }else{
          cb(new Error('请输入合法手机号'));
        }
      }
    return {
      addDialogVisible:false,
      // 添加表单验证规则对象
      addFromRules:{
        username:[
          {required: true, message: "请输入用户名", trigger: 'blur'},
          {min: 3, max:10, message: "用户名长度在3-10个字符之间", trigger: 'blur'}
        ],
        password:[
          {required: true, message: "请输入密码", trigger: 'blur'},
          {min: 6, max:15, message: `密码长度在${6}-${15}个字符之间`, trigger: 'blur'}
        ],
        email:[
          {required: true, message: "请输入邮箱", trigger: 'blur'},
          {validator: checkEmail,trigger:'blur'}
        ],
        mobile:[
          {required: true, message: "请输入手机", trigger: 'blur'},
          {validator: checkPhone,trigger:'blur'}
        ]
      },
      // 添加表单对象
      addFrom:{
        email:'',
        mobile:'',
        username:'',
        password:''
      },
    };
  },
  methods:{
     /**
       * @监听对话框关闭 {重置表单}
       */
    addDialogClosed(){
      this.$refs.addFromRef.resetFields();
    },
     /**
       * @name addUser()
       * @添加用户
       */
       addUser(){
        this.$refs.addFromRef.validate(async volid => {
          if(!volid) return;
          const {data:res} = await this.$http.post('users',{...this.addFrom})
          console.log(res);
          if (res.meta,status !== 201) {
            this.$message.error(res.meta.msg);
          }
          this.$message.success(res.meta.msg);
          // 隐藏对话框
          this.addDialogVisible = false;
          this.$emit('getUserList');
        })
      },
  }
}
</script>